import React, { useState } from 'react';
import { Menu, Dropdown } from 'antd';
import { MenuOutlined } from '@ant-design/icons';

/**
 * @param {trigger} 触发方式 ['click', 'hover']
 * @param {content} 触发内容 children
 * @param {data} !必填 - 菜单条目 {key:'标志位', code:'条目类型', label:'名称', props:"配置ant属性"}
 * @param {onMenuChange} 菜单操作事件
 * @param {propsOption} 其他属性 - Dropdown
 * @returns ReactNode - 下拉菜单框
 */

const MenuOperationDOM = (props) => {
  const {
    trigger = 'hover',
    content,
    data = [],
    onMenuChange = () => {},
    propsOption = {},
  } = props;

  const menuOperationDom = () => (
    <Menu onClick={onMenuChange} className="user-menu-style">
      {(data || []).map((item) => (
        <Menu.Item key={item.code} {...item}>
          {item.name}
        </Menu.Item>
      ))}
    </Menu>
  );

  return (
    <Dropdown overlay={menuOperationDom} trigger={[`${trigger}`]} {...propsOption}>
      {content ? content : <MenuOutlined />}
    </Dropdown>
  );
};

export default MenuOperationDOM;
